<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>机器管理</BreadcrumbItem>
			<BreadcrumbItem>机器列表</BreadcrumbItem>
		</Breadcrumb>

		<Form ref="formInline" :model="request" inline style="height: 57.38px;">
			<FormItem>
				<Input type="text" v-model="request.name" clearable placeholder="请输入机器名" />
			</FormItem>
			<FormItem>
				<Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
				<Button v-if="showDel" style="margin-right: 10px" @click="alldel">批量删除</Button>
			</FormItem>
		</Form>
		<div class="form_box">
			<Table :columns="columns1" :data="tableData" @on-selection-change="selectChange">
				<template slot-scope="{ row }" slot="status">
					<Tag color="success" type="border" v-if="row.status == 1">启用</Tag>
					<Tag color="error" type="border" v-if="row.status == 2">禁用</Tag>
				</template>


				<template slot-scope="{ row }" slot="option">
					<Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
					<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
				</template>
			</Table>


		</div>


		<div style="display: flex;justify-content: center;margin-top: 24px;">
			<Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
				show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		</div>


		<Modal v-model="modal1" :title="form.id ? '编辑机器' : '添加机器'" :loading="modalLoading" :mask-closable="false"
			@on-ok="confirm" @on-cancel="cancel">
			<Form :model="form" :label-width="110">
				<FormItem label="机器">
					<Input v-model="form.name" placeholder="请输入机器名"></Input>
				</FormItem>
				<FormItem label="机器组">
					<Select clearable v-model="form.td" placeholder="请选择" style="width: 120px;">
						<Option :value="item.id" v-for="(item,index) in groupList" :key="index">{{item.name}}</Option>
					</Select>
				</FormItem>

			</Form>
		</Modal>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				width: this.$store.state.width,
				height: this.$store.state.height,
				showDel: false, //批量删除
				type: 1, //1admin 2manager 3operator
				loading: false,
				request: {
					name: '',
					page: 1
				},

				columns1: [{
						width: 60,
						align: "center",
						type: 'selection'
					},

					{
						title: "机器",
						key: "name",
						minWidth: 150,
						align: "center"
					},
					{
						title: "机器组",
						key: "device_group",
						minWidth: 150,
						align: "center"
					},
					{
						title: "状态",
						slot: "status",
						minWidth: 150,
						align: "center"
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 150,
						align: "center"
					},

					{
						title: "操作",
						slot: "option",
						minWidth: 150,
						align: "center",
						fixed: 'right',
					}
				],
				tableData: [],
				page: {},
				modalLoading: true,
				modal1: false,
				form: {
					id: null,
					name: '',
					manager_id: null
				},
				selectID: [],
				groupList:[],
			};
		},
		created() {
			if (this.$route.query.name) {
				this.request.username = this.$route.query.name
			}
			if (this.$route.query.type) {
				this.type = this.$route.query.type
			}

			this.lists();

		},
		methods: {
			alldel() {
				//批量删除
				this.$Modal.confirm({
					title: "确定要删除这些机器？",
					onOk: () => {

						this.axios.post("device/deviceDel", {
							id: this.selectID
						}).then(res => {
							if (res.code == 1) {
								this.$Message.success("删除成功");
								this.lists();
							}
						})
						// this.$Message.success('批量删除id:' + JSON.stringify(this.selectID));
					},
					onCancel: () => {}
				});


			},
			selectChange(selection) {
				console.log('选项发生改变', selection)
				this.selectID = [];
				selection.forEach(item => {
					this.selectID.push(item.id)
				})

				if (this.selectID.length > 0) {
					this.showDel = true
				} else {
					this.showDel = false
				}

				console.log(this.selectID)


			},

			getGroup(){
				this.axios.post("device/operatorGroup").then(res => {
					if (res.code == 1) {
						this.groupList = res.data;
					}
				});
			},

			search() {
				this.request.page = 1;
				this.lists();
			},
			handleSizeChange(val) {
				this.request.page = 1;
				this.request.pagerows = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page = val;
				this.lists();
			},
			lists() {
				this.loading = true;
				this.axios.post("device/deviceList", this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});
			},
			edit(row) {
				console.log(row)
				this.form.id = row.id;
				this.form.name = row.name;
				this.form.manager_id= row.manager_id;
				this.modal1 = true;
			},
			confirm() {
				this.axios.post('device/deviceEdit',this.form).then(res => {
					if (res.code == 1) {
						this.modal1= false
						this.$Message.success("操作成功");
						this.cancel()
						this.lists();
					}
				});
			},
			remove(row) {
				this.$Modal.confirm({
					title: "确定要删除此机器吗？",
					onOk: () => {
						this.axios.post("device/deviceDel", {
							id: [row.id]
						}).then(res => {
							if (res.code == 1) {
								this.$Message.success("删除成功");
								this.lists();
							}
						})
					},
					onCancel: () => {}
				});
			},

			cancel() {
				this.form = {
					id: null,
					name: '',
					manager_id: null
				};
			}
		}
	};
</script>

<style scoped>
	.spec_item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.spec_item .input {
		width: 200px;
	}

	.spec_item button {
		margin-left: 10px;
	}
</style>
